<template>
  <div>
    <div v-if="refunds.length>0">
      <el-row >
        <el-col :span="20" :offset="2">
          <el-row class="myrow" v-if="refunds.length>0">
            <el-col :span="10">
              宝贝
            </el-col>
            <el-col :span="3">
              退款金额(元)
            </el-col>
            <el-col :span="4">
              申请时间
            </el-col>
            <el-col :span="4">
              退款状态
            </el-col>
          </el-row>
          <div v-for=" o in refunds">
            <el-row class="rowtitle">
              <el-col :span="5">
                订单号:{{o.detail.orders.pid}}
              </el-col>
              <el-col :span="5">
                退货单号:{{o.returnNumber}}
              </el-col>
            </el-row>
            <el-row class="rowcontent">
              <el-col :span="3">
                <img :src="o.detail.shopInfo.imags[0].imagUrl"
                     class="myimg" alt="err">
              </el-col>
              <el-col :span="7" class="mytext">
                {{o.detail.shopInfo.shopName}}
                {{o.detail.shopInfo.shopRemark}}
              </el-col>
              <el-col :span="3" :offset="1" class="mytext" style="color:#f40">
                ￥{{o.money}}
              </el-col>
              <el-col :span="4" class="mytext">
                {{o.returnTime}}
              </el-col>
              <el-col :span="2" class="mytext">
                <el-tag v-if="o.goodsState==0">待确认</el-tag>
                <el-tag v-if="o.goodsState==1">待商家取货</el-tag>
                <el-tag v-if="o.goodsState==2">待总店取货</el-tag>
                <el-tag v-if="o.goodsState==3 ||o.goodsState==4 || o.goodsState==5 || o.goodsState==6 ||o.goodsState==7">
                  卖家等待收货
                </el-tag>
                <el-tag v-if="o.goodsState==8" type="success">退款成功</el-tag>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row class="mytop" v-if="refunds.length>0">
        <el-col :span="8" :offset="8">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageno"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div v-if="refunds.length==0">
      <el-empty description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
  export default {
    name: "UserReturnView",
    data() {
      return {
        refunds: [],
        refund:{returnNumber:"",uid:sessionStorage.getItem('id'),isDelete:0},
        pageno: 1,
        pagesize: 5,
        total: 1,
      }
    },
    methods: {
      getData(){
        var params = {};
        params["pageno"] = this.pageno;
        params["pagesize"] = this.pagesize;
        Object.keys(this.refund).forEach(item => {
          params[item] = this.refund[item];
        });
        this.$axios
          .get("queryAllReturn.action",{params: params})
          .then(res=>{
            res.data.records.forEach(item=>{
              item.detail.shopInfo.imags[0].imagUrl=this.$store.state.path+ item.detail.shopInfo.imags[0].imagUrl;
            })
            this.refunds=res.data.records;
            this.total = res.data.total;

          })
          .catch(err=>{this.$message.error(err)})
      },
      handleSizeChange(val) {
        //每页范围
        this.pagesize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        //当前页
        this.pageno = val;
        this.getData();
      },
    },
    created() {
      this.getData();
    },

  }
</script>

<style scoped>
.mytop{
  margin-top: 15px;
}
  .myrow{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #EBEEF5;
    border: 1px solid #E4E7ED;
  }
  .rowtitle{
    margin-top: 15px;
    height: 50px;
    line-height: 50px;
    background-color: #F2F6FC;
    border: 1px solid #409EFF;
  }
  .rowcontent{
    line-height: 25px;
    border: 1px solid #909399;
  }
  .myimg{
    width:120px;
    height:130px;
    margin: 10px 10px;
  }
  .mytext{
    margin: 10px 10px;
  }
</style>
